<script>
import BpmnModeler  from 'bpmn-js/lib/Modeler'
import BaseTemplate from '@/assets/source/baseTemplate.bpmn'
import customTranslate from '@/i18n/customeTranslate/customTranslate';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'

let customTranslateModule = {
  translate: ['value', customTranslate]
};
export default {
  name: 'ProcessDefine',
  data() {
    return {
      bpmnViewer: null,
      bpmnModeler: null
    }
  },
  mounted() {
    this.init()
    this.createNewDiagram()
  },
  methods: {
    init() {
      this.bpmnModeler = new BpmnModeler({
        container: '#diagrame-panel',
        keyboard: {
          bindTo: window
        },
        additionalModules: [
          customTranslateModule,
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule
        ],
        propertiesPanel: { //指定面板容器
          parent: '#properties-panel'
        },
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
    },
    async createNewDiagram() {
      this.bpmnModeler.importXML(BaseTemplate).then(() => {
        this.success()
      }).catch(err => {
        console.log("加载失败", err)
      });
    },
    getXml() {
      return new Promise((resolve,reject) => {
        this.bpmnModeler.saveXML({
          format: true
        },(err,xml) => {
          err ? reject(err) : resolve(xml)
        })
      })
    },
    success() {
      this.bpmnModeler.on('commandStack.changed',() => {
        this.getXml().then(xml => {
          console.log(xml)
        })
      })
    }
  }
}
</script>

<template>
  <div class="menu-container">
    <div id="diagrame-panel"></div>
    <div id="properties-panel"></div>
  </div>
</template>

<style scoped>
.menu-container {
  position: relative;
  height: calc(100% - 31px);
  background-color: #ffffff;
  width: 100%;
}

#diagrame-panel{
  width: 100%;
  height: 100%;
}
#properties-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>